<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>资源中心</cite></a>
        <a><cite>视频资源</cite></a>
    </div>
</div>

<body>

    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-userfront-formlist">
                <div class="demoTable">
                    视频标题：
                    <div class="layui-inline">
                        <input class="layui-input" name="videoTitle" id="videoTitle" autocomplete="off">
                    </div>
                    <button class="layui-btn" data-type="reload" lay-submit lay-filter="LAY-user-front-search">搜索</button>
                </div>
                <script type="text/html" id="toolbarDemo">
                    <div class="layui-btn-container">
                        <button type="button" class="layui-btn" id="addBtn" lay-event="addBtn">添加视频资源</button>
                        <!-- <button type="button" class="layui-btn" id="sonBtn" lay-event="sonBtn">添加子目录</button> -->
                        <button type="button" class="layui-btn" lay-event="getCheckLength" id="deleBtn">批量删除</button>
                    </div>
                </script>
                <div class="layui-fluid">
                    <div class="layui-card">
                        <div class="layui-card-body">
                            <table class="layui-hide" id="table-instance" lay-filter="table-instance"></table>
                            <script type="text/html" id="imgTpl">
                                <img style="display: inline-block; width: 50%; height: 100%;" src={ { d.avatar }}>
                            </script>
                            <script type="text/html" id="table-useradmin-webuser">
                                <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                            </script>
                            </script>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>
<script type="text/html" id="video">
    <button type="video" class="layui-btn layui-btn-xs table-check-img" data-img="{{d.videoUrl}}">查看视频</button>
</script>
<script>
    layui.use(['layedit', 'admin', 'upload', 'laydate', 'useradmin', 'table', 'form'], function() {
        var $ = layui.$,
            admin = layui.admin,
            setter = layui.setter,
            view = layui.view,
            table = layui.table,
            form = layui.form,
            leyer = layui.leyer,
            upload = layui.upload,
            laydate = layui.laydate,
            layedit = layui.layedit;

        form.render(null, 'layadmin-userfront-formlist');
        //监听搜索
        form.on('submit(LAY-user-front-search)', function(data) {
            var field = data.field;
            //执行重载
            getData('/video/admin/search', field)
        });
        //监听工具栏操作（新增，批量删除等）
        table.on('toolbar(table-instance)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addBtn':
                    admin.popup({
                        title: '添加产品',
                        area: ['900px', '800px'],
                        offset: 'auto',
                        id: 'LAY-popup-useradmin-add',
                        url: setter.request.baseUrl + "/video/admin/add",
                        success: function(layero, index) {
                            view(this.id).render('leaderboard/table').done(function() {
                                form.render(null, 'layuiadmin-form-admin');
                                var aa = layedit.build('demo');
                                laydate.render({
                                    elem: '#date'
                                });
                                //监听提交
                                form.on('submit(LAY-user-front-submit)', function(data) {
                                    var field = data.field;
                                    //富文本框
                                    var aahtml = layedit.getContent(aa);
                                    field.videoDetail = aahtml
                                        //时间转时间戳
                                    var EndTime = field.time;
                                    field.time = new Date(EndTime).getTime() / 1000;

                                    //提交 Ajax 成功后，关闭当前弹层并重载表格
                                    adminAdd(field);
                                    getData()
                                    layer.close(index); //执行关闭 
                                });
                            });
                        }
                    });
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data,
                        arr = [];
                    if (data.length == 0) {
                        layer.msg('未选中数据');
                        return;
                    }
                    for (let i = 0; i < data.length; i++) {
                        arr.push(data[i].videoId)
                    }
                    var params = {
                        ids: arr
                    }
                    admin.req({
                        url: setter.request.baseUrl + "/video/admin/deleteall",
                        data: JSON.stringify(params),
                        type: "post",
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        done: function(res) {
                            layer.msg("删除成功"); //删除成功之后弹窗
                            getData()
                        },
                    });
                    break;

            };
        });

        getData()

        function getData(searchurl, where) {
            console.log(searchurl)
            if (searchurl) {
                var url = setter.request.baseUrl + searchurl;
                var where = where;
            } else {
                var url = setter.request.baseUrl + "/video/frontend/list";
                var where = {
                    typeId: 1
                }
            }
            table.render({
                elem: "#table-instance",
                url: url,
                method: "get",
                toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板  
                headers: {
                    token: layui.data("layuiAdmin").token
                },
                response: {
                    statusName: "code",
                    statusCode: 0,
                    msgName: "msg",
                    countName: "count",
                    dataName: "list",
                },
                where: where,
                cols: [
                    [{
                        type: 'checkbox',
                        fixed: 'left'
                    }, {
                        align: 'center',
                        field: "videoId",
                        width: "5%",
                        sort: true
                    }, {
                        align: 'center',
                        field: "videoTitle",
                        width: "15%",
                        title: "视频标题"
                    }, {
                        align: 'center',
                        field: "videoPreview",
                        width: "20%",
                        title: "视频简介"
                    }, {
                        align: 'center',
                        field: "videoUrl",
                        width: "8%",
                        templet: "#video",
                        title: "视频链接"
                    }, {
                        align: 'center',
                        field: "time",
                        width: "10%",
                        title: "时间",
                        templet: function(d) {
                            var star_releaseTime = layui.util.toDateString(new Date(d.releaseTime * 1000).getTime(), "yyyy/MM/dd");
                            return '<div>' + star_releaseTime + '</div>'
                        }
                    }, {
                        align: 'center',
                        field: "videoDetail",
                        width: "19.1%",
                        title: "详情"
                    }, {
                        align: 'center',
                        width: "20%",
                        toolbar: "#table-useradmin-webuser" //删除
                    }]
                ],
                page: true, //分页
            });
        }

        $('.layui-btn.layuiadmin-btn-useradmin').on('click', function() {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });



        $(document).on("click", ".table-check-img", function(e) {
            var json = {
                title: "审核图片",
                id: 0,
                start: 0,
                data: [{
                    alt: "",
                    pid: 1,
                    src: $(e.target).data("img"),
                      //原图地址
                    thumb: "",
                }, ],
            };
            console.log(json)
            if (json.data[0].src == null) {
                layer.msg("暂无图片", {
                    offset: "15px",
                    icon: "2",
                    time: 1000
                })
            } else {
                var result = json.data[0].src.split(",");
                var j = new Array;
                for (var i = 0; i < result.length; i++) {
                    let json = {
                        "src": result[i]
                    }
                    j[i] = json;
                }
                layer.photos({
                    photos: {
                        "data": j
                    },
                    anim: 1,
                });
            }
        });


        // $(document).on("click", ".table-check-video", function(e) {
        //     var loadstr = '<video width="100%" height="100%" align=" center" controls="controls" autobuffer="autobuffer"  autoplay="autoplay" loop="loop"><source src="https://demoee.oss-cn-shanghai.aliyuncs.com/biosso/47e4dd9bcca044288ee1d73e094c38ee"></source></video>'

        //     layer.open({
        //         type: 1,
        //         title: '播放视频',
        //         content: loadstr,
        //         offset: ['25%', '25%'] //设置位移

        //     });
        // })


        //删除模块
        table.on("tool(table-instance)", function(obj) {
            var data = obj.data;

            if (obj.event === "del") {
                layer.confirm("真的删除么", function(index) {
                    delAdminHandle({
                        videoId: data.videoId,
                    });

                    obj.del();
                    layer.close(index);
                });
            } else if (obj.event === "edit") {
                admin.popup({
                    title: "编辑用户",
                    area: ["800px", "800px"],
                    success: function(layero, index) {

                        view(this.id)
                            .render("leaderboard/table", data)
                            .done(function() {
                                let _data = data;
                                form.render(null, "layuiadmin-form-admin");
                                laydate.render({
                                    elem: '#date'
                                });
                                var releaseTime = layui.util.toDateString(new Date(_data.releaseTime * 1000).getTime(), "yyyy-MM-dd");
                                laydate.render({
                                    elem: '#date',
                                    value: releaseTime,
                                    isInitValue: true
                                });
                                //富文本
                                var aa = layedit.build('demo');
                                layedit.setContent(aa, data.videoDetail, false)
                                form.on("submit(LAY-user-front-submit)", function(data) {
                                    var field = data.field;
                                    //富文本框
                                    var aahtml = layedit.getContent(aa);
                                    field.videoDetail = aahtml
                                        //时间转时间戳
                                    var EndTime = field.time;
                                    field.time = new Date(EndTime).getTime() / 1000;

                                    //提交 Ajax 成功后，关闭当前弹层并重载表格
                                    adminAdd(field);
                                    getData()
                                    layer.close(index); //执行关闭 
                                });
                            });
                    },
                });
            }
        });

        // //删除
        function delAdminHandle(params) {
            console.log(params)

            //  debugger
            admin.req({
                //*****************需要替换****************
                url: setter.request.baseUrl + "/video/admin/delete",
                data: {
                    ...params,
                },
                type: "get",
                done: function(res) {
                    layer.msg("删除成功"); //删除提示框
                },
            });
        }

        // //修改编辑
        // function editUserHandle(params) {
        //     admin.req({
        //         url: setter.request.baseUrl + "/recruit/admin/update",
        //         data: JSON.stringify(params),
        //         type: "post",
        //         dataType: "json",
        //         contentType: "application/json",
        //         done: function(res) {
        //             layui.table.reload("table-instance");
        //         },
        //     });
        // }

        //添加
        function adminAdd(params) {
            admin.req({
                url: setter.request.baseUrl + "/video/admin/add",
                data: JSON.stringify(params),
                type: "post",
                dataType: "json",
                contentType: "application/json",
                done: function(res) {
                    getData()
                },
            });
        }
    });
</script>
<script type="text/html" id="video">
    <button type="button" class="layui-btn layui-btn-xs table-check-video" data-img="{{d.videoUrl}}">查看视频</button>
</script>